<template>
  <div class="el-toolMaterial">
    <TableTitle>
      <slot>
        <p>查询条件</p>
      </slot>
    </TableTitle>
    <ConditionSearch style="padding: 5px 0">
      <slot>
        <div class="tableSearch">
          <ul>
            <li>
                <el-input
                    ref="saomaInput"
                    size="mini"
                    v-model="palletCode"
                    placeholder="请输入内容"
                ></el-input>
                <span>工作包器具编码：</span>
            </li>
            <li>
                <el-input
                size="mini"
                v-model="packageCode"
                placeholder="请输入内容"
                ></el-input>
                <span>工作包编码：</span>
            </li>
            <li>
                <el-input
                size="mini"
                v-model="aoCode"
                placeholder="请输入内容"
                ></el-input>
                <span>AO任务号：</span>
            </li>
            <li>
                <el-input
                size="mini"
                v-model="itemCode"
                placeholder="请输入内容"
                ></el-input>
                <span>物料编码：</span>
            </li>
          </ul>
          <div class="searchBtnBox">
            <el-button size="mini" type="primary" @click="searchBtn"
                >查询</el-button
              >
          </div>
        </div>
      </slot>
    </ConditionSearch>
    <TableTitle>
      <slot>
        <p>操作按钮</p>
      </slot>
    </TableTitle>
    <TopBtn></TopBtn>
    <TableTitle>
      <slot>
        <p>工作包物料信息表</p>
      </slot>
    </TableTitle>
    <Table></Table>
  </div>
</template>
<script>
import TopBtn from "./components/TopBtn.vue";
import Table from "./components/InfoTable.vue";
import ConditionSearch from "../aacomponents/ConditionSearch.vue";
import TableTitle from "../../../../components/TableTitle.vue";
import { sysToolMaterialData } from "@/utils/api.js";
export default {
  name: "ToolMaterial",
  components: {
    ConditionSearch,
    TopBtn,
    Table,
    TableTitle,
  },
  data() {
    return {
            palletCode:'',
            packageCode:'',
            aoCode:'',
            itemCode:'',
            // 
            pageSize:100,
            pageNumber:1
    };
  },
  methods:{
    // 查询
    searchBtn(){
      sysToolMaterialData({
        searchParams:{
          palletCode:this.palletCode,
          packageCode:this.packageCode,
          aoCode:this.aoCode,
          itemCode:this.itemCode
        },
        pageParameter:{
          rows:this.pageSize,
          page:1
        }
      }).then((res)=>{
        console.log('工作包物料表格',res)
        if(res.data.retCode == 200){
          this.$Alert({
              title: "成功",
              message: res.data.message,
              type: "success",
          });
          // 查询成功将数据给Table --改名字
          this.$bus.$emit('sysTmSxTable',{data:res,palletCode:this.palletCode,packageCode:this.packageCode,aoCode:this.aoCode,itemCode:this.itemCode})
        }else {
          this.$bus.$emit('sysTmSxTable',{data:res,palletCode:this.palletCode,packageCode:this.packageCode,aoCode:this.aoCode,itemCode:this.itemCode})
            this.$Alert({
                title: "失败",
                message: res.data.message,
                type: "error",
            });
        }
      })
    }
  },
  mounted(){

  }
};
</script>
<style scoped>
.tableSearch {
  position: relative;
}
.tableSearch ul{
  overflow: hidden;
}
.tableSearch ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;

}
.tableSearch ul li span {
  float: right;
}
.tableSearch ul li div {
  float: right;
}
.el-input {
    width: 130px;
}
.searchBtnBox {
  position: absolute;
  top: 0;
  right: 50px;
}
</style>